<template>
  <div class="PhotovoltaicReportbox">
    <div class="leftbox">
      <NocheckTree @handleNodeClicks="handleNodeClicks"></NocheckTree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <div style="font-size: 14px;color: #606266;">
          <el-radio-group v-model="radio3" size="small" style="margin-right: 20px;">
            <el-radio-button label="1">月</el-radio-button>
            <el-radio-button label="2">年</el-radio-button>
          </el-radio-group>
          <span v-if="radio3=='1'" class="zhi" >
              <el-date-picker  v-model="value1" type="month" value-format="yyyy-MM" placeholder="选择开始月" size="small"></el-date-picker> 至
              <el-date-picker  v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择结束月" size="small"></el-date-picker>
            </span>
            <span v-else class="zhi">
              <el-date-picker  v-model="value3" type="year" value-format="yyyy" placeholder="选择开始年" size="small"></el-date-picker> 至
              <el-date-picker  v-model="value4" type="year" value-format="yyyy" placeholder="选择结束年" size="small"></el-date-picker>
            </span>
        </div>
        <div>
          <el-button size="small" @click="chongzhi">重 置</el-button>
          <el-button size="small" type="primary" @click="gettablelist(treevalue)">查 询</el-button>
        </div>
      </div>
      <div class="rightbody">
        <div class="bodyxunhuan" ref="bodyxunhuan">
          <!-- 新增报告盒子 -->
          <div class="addlittlebox">
            <div class="iconandtext">
              <div class="icon" @click="addroport">
                <i class="iconfont icon-jiahao1"></i>
              </div>
              <div class="text"  @click="addroport">新增报告</div>
            </div>
          </div>
          <!-- 列表循环盒子 -->
          <div class="addlittlebox" v-for="item in reportlist" :key="item.id">
            <div class="title">
              <span>{{item.dateString}}</span>
              <span><i class="iconfont icon-xiazai1"></i> </span>
            </div>
            <div class="nneghaobao">光伏电站运行报告</div>
            <div class="image">
              <i class="iconfont icon-p"></i>
            </div>
            <div class="qiyename">{{ item.powerName }}</div>
            <div class="footerbuttor">
              <div><i class="el-icon-view" @click="openreport(item)"></i> </div>
              <div><i class="el-icon-edit"></i> </div>
              <div><i class="el-icon-delete" @click="dellist(item)"></i> </div>
            </div>
          </div>
         </div>
         <!-- 底部分页 -->
         <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="9"
                @current-change="getdatalist(treevalue)"
                :total="+totalCount">
          </el-pagination>
         </div>
         <!-- 新增报告弹窗 -->
         <el-dialog
          title="报告单维护"
          :visible.sync="dialogVisible"
          width="30%">
          <div>
            <el-form ref="form" :model="form" label-width="80px">
              <el-row >
                <el-col :span="24">
                  <el-form-item label="企业">
                    <el-input v-model="form.powerName" placeholder="请选择企业"  size="small" style="width: 100%;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="24">
                  <el-form-item label="时间类型">
                    <el-radio-group v-model="form.dateType" size="small" style="margin-right: 10px;">
                      <el-radio-button label="1">月</el-radio-button>
                      <el-radio-button label="2">年</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row >
                <el-col :span="24">
                  <el-form-item label="日期">
                    <el-date-picker  v-model="form.dateString" :type="form.dateType=='1'?'month':'year'" style="width: 100%;"
                    :value-format="form.dateType=='1'?'yyyy-MM':'yyyy'" :placeholder="`选择${form.dateType=='1'?'月份':'年份'}`" size="small" > </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogVisible = false" size="small">取 消</el-button> -->
            <el-button type="primary" @click="submit" size="small" style="width: 60%;">生 成</el-button>
          </span>
        </el-dialog>
        <!-- 浏览报告弹窗 -->
         <BianjiReport :radio3="radio3" :reportvalue="reportvalue" :treevalue="treevalue" ref="BianjiReport"></BianjiReport>
      </div>
    </div>
  </div>
</template>

<script>
import {getdianzhanreportapi,postdianzhanaddreportapi,postdeldianzhanapi} from '@/api/Photovoltaic/StatisticsReport/PhotovoltaicReport'
import NocheckTree from '../../monitor/component/NocheckTree.vue'
import BianjiReport from './BianjiReport.vue'
export default {
  name: 'CallPoliceInde',
  components: {
    NocheckTree,
    BianjiReport
  },
  data() {
    return {
      radio3: '1',
      value1:'',
      value2:'',
      value3: '',
      value4: '',
      pageobj: {
        pageNo: 1,
        pageSize:9
      },
      totalCount: '',
      dialogVisible:false,
      form: {dateType:'1'},
      reportlist: [],
      treevalue: {},
      reportvalue:{}
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    // 确定
    async submit() {
      await postdianzhanaddreportapi({ ...this.form, classId: this.treevalue.id }).then(res => {
        console.log(res);
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message:res.code=='200'?'新增报告成功':res.message
        })
      })
      this.form={dateType:'1'}
      this.dialogVisible = false
      this.gettablelist(this.treevalue)
    },
    // 树节点点击
    async handleNodeClicks(val) {
      this.treevalue=val
      this.gettablelist(val)
    },
    // 获取数据
    async gettablelist(val) {
      const loading= this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target:this.$refs.bodyxunhuan
      })
      const { data: { list } } = await getdianzhanreportapi({
        dateType:this.radio3, startDate: this.radio3 == '1' ? this.value1 : this.value3,classId:val.id,
        endDate: this.radio3 == '1' ? this.value2 : this.value4,pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize
      })
      this.reportlist = list
      loading.close()
    },
    // 查看报告
    openreport(val) {
      this.reportvalue = val
      this.$refs.BianjiReport.dialogVisible = true
      setTimeout(()=>this.$refs.BianjiReport.getbaogaolist(),200)
    },
    // 删除报告
    dellist(val) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await postdeldianzhanapi(val.id)
          this.$message.success('删除成功')
          this.gettablelist(this.treevalue)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增
    addroport() {
      this.dialogVisible = true
      this.$set(this.form,'powerName',this.treevalue.name)
    },
    // 重置
    chongzhi() {
      this.radio3 = '1'
      this.gettime()
      this.gettablelist(this.treevalue)
    },
      // 获取当前时间戳
   gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      this.value4 = year.toString()
      this.value3 = ((+this.value4)-1).toString()
      this.value2 = year + '-' + month
      this.value1 = year + '-' + '01'
    },
  },
};
</script>

<style scoped>
.PhotovoltaicReportbox{
  display: flex;
  height: 100%;
  padding: 10px;
  .leftbox{
    width: 300px;
    height: 100%;
    padding: 20px;
    margin-right: 10px;
    background-color: #fff;
  }
  .rightbox{
    width: calc(100% - 310px);
    height: 100%;
    .righttop{
      height: 80px;
      background-color: #fff;
      line-height: 80px;
      padding: 0 20px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      .button{
        width: 60px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 3px;
        margin-left: 10px;
      }
      .sure{
        color: #fff;
        background-color: #1890ff;
      }
    }
    .rightbody{
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 10px;
      .bodyxunhuan{
        height: 95%;
        display: flex;
        flex-wrap: wrap;
        /* justify-content: space-between; 主轴上的对齐方式 */
        align-items: space-between; /* 交叉轴上的对齐方式 */
        .addlittlebox{
          width: calc(20% - 20px); /* 每行显示五个盒子，减去盒子之间的间距 */
          height: calc(50% - 20px); /* 两行盒子平分父容器的高度，减去盒子之间的间距 */
          margin: 10px; /* 盒子之间的间距 */
          border: 1px solid skyblue;
          border-radius: 5px;
          padding: 20px;
          .iconandtext{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: #4095e5;
            .icon{
              .iconfont{
                font-size: 100px;
              }
            }
            .text, .icon{
              cursor: pointer;
            }
          }
          .title{
            display: flex;
            justify-content: space-between;
          }
          .nneghaobao{
            margin: 20px 0;
            color: #4095e5;
          }
          .image{
            text-align: center;
            .icon-p{
              font-size: 130px;
              font-weight: bold;
              color: #41cdaf;
            }
          }
          .qiyename{
            margin: 20px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .footerbuttor{
            padding :0 20px;
            display: flex;
            justify-content: space-between;
            i{
              cursor: pointer;
              font-size:18px;
            }
            .el-icon-view{
              color:#81b337;
            }
            .el-icon-edit{
              color:#1890ff;
            }
            .el-icon-delete{
              color:red;
            }
          }
        }
      }
      .fenye{
        display: flex;
        justify-content: flex-end;
       }
    }
  }
}
::v-deep .el-dialog__footer{
  text-align:center;
}
</style>